<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">部门/员工</h2>
    </div>
    <!-- 内容区 -->
    <el-row class="box-bd">
      <el-col :span="6" class="left-side">
        <h3 class="side-hd">部门</h3>
        <div class="side-list">
          <ul>
            <li v-for="(dept,index) in deptList" :key="index">
              <span>{{ dept.deptName }}</span>
              <el-link
                type="info"
                v-show="btnState"
                :underline="false"
                class="btn-link"
                @click="deptDel(dept)"
              >
                <i class="el-icon-delete"></i>
              </el-link>
              <el-link
                type="info"
                v-show="btnState"
                :underline="false"
                class="btn-link"
                @click="deptEdit(dept)"
              >
                <i class="el-icon-edit"></i>
              </el-link>
            </li>
          </ul>
          <div class="add-box" v-show="btnState">
            <el-link type="primary" @click="deptDialogAdd = true" :underline="false">新增部门</el-link>
          </div>
        </div>
        <div class="btn-box">
          <el-link type="primary" v-show="!btnState" @click="btnState=true" :underline="false">编辑</el-link>
          <el-link type="primary" v-show="btnState" @click="btnState=false" :underline="false">完成</el-link>
        </div>
      </el-col>
      <el-col :span="18" class="p30">
        <!-- 筛选条件 -->
        <div class="search-box">
          <el-button icon="el-icon-search" size="small">筛选</el-button>
          <el-button type="primary" size="small" @click="dialogAdd=true" class="fr">新增</el-button>
          <!-- <el-button type="primary" size="small" @click="changeDeptAll" class="fr">批量更改部门</el-button>
          <el-button type="primary" size="small" @click="changeRoleAll" class="fr">批量更改角色</el-button> -->
        </div>
        <!-- 列表数据 -->
        <div class="list-box">
          <el-table
            :data="tableData"
            max-height="500px"
            stripe
            class="table-list"
            v-loading="loading"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="deptName" label="所属部门"></el-table-column>
            <el-table-column prop="roleName" label="所属角色"></el-table-column>
            <el-table-column prop="phoneNumber" label="手机"></el-table-column>
            <el-table-column prop="emailAddress" label="邮箱"></el-table-column>
            <el-table-column label="允许登录">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.delState"
                  :active-value="0"
                  :inactive-value="1"
                  @change="stopUser(scope.row,$event)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchData.currentPage"
            :page-sizes="[15, 25, 30, 50]"
            :page-size="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.size"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 部门新增 -->
    <el-dialog
      title="新增部门"
      :visible.sync="deptDialogAdd"
      width="500px"
      @closed="deptFormReset"
      :close-on-click-modal="false"
    >
      <el-form :model="deptForm" ref="deptForm">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="deptForm.deptName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deptDialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="deptSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 部门编辑 -->
    <el-dialog
      title="编辑部门"
      :visible.sync="deptDialogEdit"
      width="500px"
      @closed="deptFormReset"
      :close-on-click-modal="false"
    >
      <el-form :model="deptForm" ref="deptForm">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="deptForm.deptName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deptDialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="deptUpdate">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 员工新增 -->
    <el-dialog
      title="新增员工"
      :visible.sync="dialogAdd"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <user-add @changeState="dialogAdd=$event" @reload="initTableData"></user-add>
    </el-dialog>
    <!-- 员工编辑 -->
    <el-dialog
      title="编辑员工"
      :visible.sync="dialogEdit"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <user-edit ref="editDialog" @changeState="dialogEdit=$event" @reload="initTableData"></user-edit>
    </el-dialog>
  </div>
</template>
<script>
import {
  save as deptSave,
  del as deptDel,
  update as deptUpdate,
  findList as deptList
} from '@/api/dept'
import { getUserList, changeState, del as userDel } from '@/api/user'
import UserAdd from 'set/user/user-add'
import UserEdit from 'set/user/user-edit'
export default {
  components: {
    UserAdd,
    UserEdit
  },
  data() {
    return {
      formLabelWidth: '120px',
      btnState: false,
      deptDialogEdit: false,
      deptDialogAdd: false,
      dialogAdd: false,
      dialogEdit: false,
      dialogDeptEdit: false,
      dialogRoleEdit: false,
      companyId: this.$store.state.user.companyId,
      deptList: [],
      deptForm: {
        id: '',
        companyId: this.$store.state.user.companyId,
        deptName: ''
      },
      tableData: [],
      multipleSelection: [],
      loading: false,
      searchData: {
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    this.initDeptList()
    this.initTableData()
  },
  methods: {
    initDeptList() {
      deptList(this.companyId).then(res => {
        this.deptList = res.data
      })
    },
    deptSave() {
      deptSave(this.deptForm).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.deptDialogAdd = false
          this.initDeptList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deptEdit(row) {
      this.deptForm = row
      this.deptDialogEdit = true
    },
    deptUpdate() {
      deptUpdate(this.deptForm).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.deptDialogEdit = false
          this.initDeptList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deptDel(row) {
      deptDel(row).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.initDeptList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deptFormReset() {
      this.deptForm.id = ''
      this.deptForm.deptName = ''
    },
    initTableData() {
      this.loading = true
      let params = { companyId: this.companyId }
      getUserList(params).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    edit(id) {
      this.dialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.editDialog.initDialogData(id)
      })
    },
    del(row) {
      userDel(row).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.initTableData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    stopUser(row, obj) {
      let params = { userid: row.userid, delState: parseInt(obj) }
      changeState(params).then(res => {
        this.$message.info(res.message)
        this.searchData.currentPage = 1
        this.initTableData()
      })
    },
    // 获取多选项
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 批量修改部门
    changeDeptAll() {
      this.dialogDeptEdit = true
    },
    // 批量修改角色
    changeRoleAll() {
      this.dialogRoleEdit = true
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.side-hd {
  height: 35px;
  line-height: 36px;
  color: #909399;
  padding: 0 24px;
  font-size: 14px;
}
.box-bd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 68px;
}
.left-side {
  position: relative;
  height: 100%;
  border-right: 1px solid #e4eaf0;
  .add-box {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .btn-box {
    @extend .add-box;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #e4eaf0;
  }
  .side-list {
    height: calc(100% - 85px);
    overflow-y: auto;
    li {
      height: 50px;
      line-height: 50px;
      padding: 0 35px;
      &:hover {
        background: #f0f3f5;
        color: #359cf3;
      }
      .btn-link {
        float: right;
        margin-left: 15px;
      }
    }
  }
}
</style>
